import { useEffect, useState } from "react";

/**
 * MyComponents组件函数
 * 该组件用于显示当前时间
 */
function MyComponents() {
  // 初始化time状态为当前日期和时间
  const [time, settime] = useState(new Date())

  // 使用useEffect在组件挂载时设置一个定时器，每秒更新时间
  useEffect(() => {
    console.log('组件挂载');
    
    const timer = setInterval(() => {
      settime(new Date())
    }, 1000)
    // 在组件卸载时清除定时器
    return () => {
      clearInterval(timer)
    }
  }, [])

  /**
   * formattime函数
   * 用于格式化时间状态为小时:分钟:秒的字符串格式
   * @returns {string} 格式化后的时间字符串
   */
  function formattime() {
    let hour = time.getHours()
    let minute = time.getMinutes()
    let second = time.getSeconds()
    return `${addzero(hour)}:${addzero(minute)}:${addzero(second)}`
  }
function addzero(num){
  if (num < 10) {
    return '0' + num
  }else{
    return num
  }
}
  // 渲染组件，显示格式化后的时间
  return (
    <div className="counter">
        <h1>{formattime()}</h1>
    </div>
  );
}
export default MyComponents;
